<script type="text/javascript"><!--//--><![CDATA[//><!--

    var grid_reload = function(){
        $('#datagrid').datagrid('reload', $('#fm_search').serializeObject());
    };

    $(document).ready(function() {
        // Setup Datagrid
        $('#datagrid').datagrid({  
            url:gs_path+'/'+controller+'/getdata', 
            queryParams: $('#fm_search').serializeObject(),
            height:350,
            pagination:true,
            fitColumns:true,
            columns:[[
                { field : 'ck', checkbox:true, width: 40, align: 'center' },
                { field : 'id_sub_departemen_pk', title : 'Jabatan ID', width : 70, sortable:true },
                { field : 'nama_departemen', title : 'Nama Unit Kerja', width : 250, sortable:true },
                { field : 'nama_sub_departemen', title : 'Nama Jabatan', width : 250, sortable:true },
                { field : 'nama_pangkat', title : 'Level', width : 150, sortable:true },
                { field : 'ket_sub_departemen', title : 'Keterangan', width : 200, sortable:true }
            ]]
        });

        // Setup Form
        $('#form_master').setupForm([
            { name : 'id_departemen_fk', data: <?php echo json_encode(array_merge(array(array('value'=>'','display'=>'')),$list_departemen)); ?>, size: 'medium', noempty:true },
            { name : 'id_pangkat_fk', data: <?php echo json_encode(array_merge(array(array('value'=>'','display'=>'')),$list_pangkat)); ?>, size: 'medium' },
            { name: 'id_sub_departemen_pk', type: 'text', size: 'medium', maxlength: 10, noempty:true },
            { name: 'nama_sub_departemen', type: 'text', size: 'long', maxlength: 100, noempty:true },
            { name: 'ket_sub_departemen', type: 'text', size: 'long', maxlength: 255 }
        ]);
        
        
        // Create Dialog
        $('#dialog_container').dialog({
            closed:true,
            modal:true,
            title: '_',
            width:600,
            height:300,
            buttons:[{
                text:'Save',
                iconCls:'icon-save',
                handler:function(){
                    $('#form_master').submitForm('/'+controller+'/ajax_post', { onComplete : function(){ $('#dialog_container').dialog('close'); $('#datagrid').datagrid('reload'); }} );
                }
            },{
                text:'Close',
                iconCls:'icon-cancel',
                handler:function(){
                    $('#dialog_container').dialog('close');
                }
            }]
        });
        
        
        // Set Action Button
        var buttons = [ { label: 'Add', icon: 'add', onclick: function() {
                            resetError();
                            $('#dialog_container').dialog('open');
                            $('#form_master').data('mode', 'create');
                            $('#form_master').parent().parent().parent().prev().find('.panel-title').html('New Role');
                            $('#id_sub_departemen_pk').readonly(false);
                            $('#id_sub_departemen_pk, #nama_sub_departemen, #ket_sub_departemen').val('');
                            $('#id_sub_departemen_pk').focus();
                        } },
                        { label: 'Edit', icon: 'edit', onclick: function() {
                            var oSel=$('#datagrid').datagrid('getSelected'); 
                            if(oSel==null){ 
                                alert('Please select row!'); 
                            } else{ 
                                resetError();
                                $('#dialog_container').dialog('open'); 
                                $('#form_master').data('mode', 'edit');
                                $('#form_master').parent().parent().parent().prev().find('.panel-title').html('Edit Role');
                                $('#id_sub_departemen_pk').readonly();
                                jsonToForm(oSel); 
                                $('#nama_sub_departemen').focus();
                            } 
                        } },
                        {label: 'Delete', icon: 'delete', onclick: function() { 
                            var oSel = $('#datagrid').datagrid('getSelected'); 
                            if (oSel == null) { 
                                $.messager.alert('&nbsp;', gs_msg_row_unselected, 'warning'); 
                            } else { 
                                deleteData(['id_sub_departemen_pk']);
                            } 
                        }}];
        setAction(buttons);
        
        
        $('#fm_search').focusFirst();
    });
//--><!]]></script>

<div id="tb" style="padding:5px;height:auto">
    <div>
        <form id="fm_search" onsubmit="grid_reload(); return false;">
            <table class="tb_form" style="margin-bottom:0px">
            <tr>
                <td width="100">Keyword</td>
                <td><input type="text" id="keyword" name="keyword" class="textfield medium" />
                    <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="grid_reload(); return false;">Search</a>
                </td>
            </tr>
            </table>
        </form>
    </div>
</div>
<div id="datagrid" toolbar="#tb"></div>


<div id="dialog_container" style="padding:5px;width:600px;height:250px;">
    <form id="form_master">
    <table class="tb_form" style="width:100%;" cellpadding="0" cellspacing="0">
    <tr>
        <td class="label" style="width:150px">Jabatan Id</td>
        <td><input id="id_sub_departemen_pk" /></td>
    </tr>
    <tr>
        <td class="label">Unit Kerja</td>
        <td><input id="id_departemen_fk" /></td>
    </tr>
    <tr>
        <td class="label">Nama Jabatan</td>
        <td><input id="nama_sub_departemen" /></td>
    </tr>
    <tr>
        <td class="label">Level</td>
        <td><input id="id_pangkat_fk" /></td>
    </tr>
    <tr>
        <td class="label">Keterangan</td>
        <td><input id="ket_sub_departemen" /></td>
    </tr>
    </table>
    </form>
</div>